<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    span {
        margin-right: 15px;
    }
</style>
<script src="./jquery-3.6.0.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>

<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
        data-whatever="@mdo">添加</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加菜单</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">新菜单:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add">确认</button>
                </div>

            </div>
        </div>
    </div>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        点餐
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">点餐</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">姓名:</label>
                        <input type="text" class="form-control" id="namea">
                    </div>
                    <label for="recipient-name" class="control-label">菜单:</label>
                    <div class="form-group" id="menus">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="order">确认</button>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-hover">
        <thead>

            <tr>
                <th>姓名</th>
                <th>菜单</th>
                <th>点餐时间</th>
                <th>操作</th>
                <th>确认下单</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
<script>
    $(function () {
        $("#add").click(function () {
            var newMenu = $('#exampleModal input').val()
            var str = `<input type="checkbox" value='${newMenu}'><span>${newMenu}</span>`
            $("#menus").append(str)
            $('#exampleModal').modal('hide')
        })

        $("#order").click(function () {
            var namea = $("#namea").val()
            var obj = {
                names: namea,
                menu: fun(),
                time: time()
            }
            setlist(obj)
            getlist()

            $('#myModal').modal('hide')
            arr = []
        })
        getlist()

        getlist()

    })
    function fun() {
        var zhi = $(":checkbox")
        var chex = ""
        for (var i = 0; i < zhi.length; i++) {
            if (zhi[i].checked) {
                chex += zhi[i].value + "<br>"
            }
        }
        console.log(chex);
        return chex
    }
    function setlist(obj) {
        if (!localStorage.getItem("list")) {
            localStorage.setItem("list", JSON.stringify([obj]))
        } else {
            var data = JSON.parse(localStorage.getItem("list"))
            data.unshift(obj)
            localStorage.setItem("list", JSON.stringify(data))
        }
    }
    function getlist() {
        if (!localStorage.getItem("list")) {

            return
        }
        $("table tbody").children().remove()
        var data = JSON.parse(localStorage.getItem("list"))
        var str = ""
        for (let i in data) {
            str += `
       <tr>
            <td>${data[i].names}</td>
            <td>${data[i].menu}</td>
            <td>${data[i].time}</td>
            <td><a onclick="dellist(${i})" name="shan">删除</a></td>
            <td><input type="button" value="确认" onclick="yeslist(this)"></td>
        </tr>
       `
        }
        $("table tbody").append(str)

    }
    function yeslist(obj) {
        console.log(234);
        $(obj).parent().prev().children().attr("onclick", "1")
        console.log($(obj).parent().prev().children().unbind("click"));
    }
    function dellist(index) {
        // console.log($(this).parent().parent().remove());
        // $(this).parent().parent().remove()
        var a = JSON.parse(localStorage.getItem("list"))
        a.splice(index, 1)

        localStorage.setItem("list", JSON.stringify(a))
        getlist()
    }
    function time() {
        var dtime = new Date();
        var nian = dtime.getFullYear(),
            yue = dtime.getMonth() + 1,
            day = dtime.getDate(),
            hours = dtime.getHours(),
            fen = dtime.getMinutes(),
            miao = dtime.getSeconds()
        return nian + "-" + yue + "-" + day + " " + hours + ":" + fen + ":" + miao
    }
</script>

</html>